<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="约车列表"
    ></van-nav-bar>

    <div class="sl-hint">
      <div>
        <p>教练：</p>
        <div>{{ cared }}</div>
      </div>
      <div>
        <p>车型：</p>
        <div>{{ caredCX }}</div>
      </div>
    </div>
    <!--  @click="onClick" -->
    <van-tabs :ellipsi="false" @click="onClick" :ellipsis="false" animated>
      <van-tab
        v-model="active"
        v-for="(item, index) in stipulatedList"
        :key="index"
        :title="item.data"
      >
        <div class="time-arrangement">时间安排</div>
        <div class="stipulated-list">
          <van-checkbox-group direction="horizontal" v-model="radio" :max="man">
            <van-checkbox
              v-for="(i, index1) in item.datalist"
              :key="index1"
              :name="i.id"
              :disabled="i.ycstatus == 1"
            >
              {{ i.beginTime }}~{{ i.endTime }}
              <div>价格：{{ i.classNum }}x{{ i.price / i.classNum }}</div>
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="appointment" @click="appointment">确认预约</div>
      </van-tab>
    </van-tabs>

    <!-- 当约完了之后，会返回约课记录 -->
    <div v-for="(item, index) in CoreeList" :key="index" class="stratosphere">
      <div class="material">
        <div>
          <div>日期：</div>
          <p>{{ item.yctime }}</p>
        </div>
        <div>
          <div>约课时段：</div>
          <p>{{ item.beginTime }} ~ {{ item.endTime }}</p>
        </div>
      </div>
      <div class="material">
        <div>
          <div>教练：</div>
          <p>{{ item.drillname }}</p>
        </div>
        <div>
          <div>车型：</div>
          <p>{{ item.cx }}</p>
        </div>
      </div>
      <div class="material">
        <div>
          <div>培训方式：</div>
          <p>实操</p>
        </div>
        <div>
          <div>价格：</div>
          <p>￥{{ item.classNum }}x{{ item.price / item.classNum }}</p>
        </div>
      </div>
      <div @click="abolish(item.id)" class="btn-abrogate">取消</div>
    </div>
    <!-- end -->

    <!-- 弹出层 -->
    <van-popup round v-model="show">
      <div class="confirm-list">
        <div class="notarize-popping">
          <p>{{ cared }}</p>
          <div>
            <div v-for="(item, index) in lists" :key="index">
              <span>{{ item.yctime }}</span
              >： {{ item.beginTime }}<span v-if="item.beginTime">~</span
              >{{ item.endTime }}
            </div>
          </div>
        </div>
        <div class="cancel-affirm">
          <div @click="cancel">取消</div>
          <div @click="confirm">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { CoachDetail } from "../../../assets/js/api/apply";
import {
  stipulatedList,
  userSubscribe,
  testRecord,
  callOff
} from "../../../assets/js/api/user";
export default {
  name: "stipulatedList",
  data() {
    return {
      active: 0,
      // result: [],
      // 约车列表
      stipulatedList: [],
      urlList: [],
      radio: [],
      man: 4, // 最多预约的课程
      show: false, //缺框弹出层
      lists: [], //约车弹出层
      name: "",
      cared: "", // 教练姓名
      caredCX: "", // 车型
      array: [], // 用来储存需要约课的id
      index: 0, // 用来储存上一步的记录
      CoreeList: [] // 当约课成功的时候来储存约课的记录
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    this.upload();
    CoachDetail(this.$route.params.id).then(res => {
      // console.log(res);
      this.cared = res.data.name;
    });
  },
  // beginTime
  methods: {
    upload() {
      let lid = this.$route.params.id;
      stipulatedList(lid).then(res => {
        // console.log(res);
        this.stipulatedList = res.data;
        // this.array = new Array(res.data.length);
        // console.log(this.array.length)
        this.caredCX = this.stipulatedList[0].datalist[0].cx;
      });
    },

    /**
     * 因为数组radio只能储存四个，所以需要重新定义一个新的数组，来储存选中的
     */
    onClick(name) {
      this.array[this.index] = this.radio;
      if (this.array[name] == undefined) {
        // console.log("111");
        this.radio = [];
      } else {
        // console.log("222");
        this.radio = [];
        this.radio = this.array[name];
      }
      this.index = name;
      // console.log(this.array);
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    appointment() {
      this.array[this.index] = this.radio;
      let arr = [];
      let addArray = Array.from(this.array);
      // console.log(addArray);
      for (let i = 0; i < addArray.length; i++) {
        // console.log(addArray[i] == undefined);
        if (!(addArray[i] == undefined)) {
          for (let j = 0; j < addArray[i].length; j++) {
            if (Array.from(this.array[i]).length != 0) {
              arr.push(this.array[i][j]);
              // console.log(this.array[i][j]);
            }
          }
        }
      }
      if (Array.from(arr).length == 0) {
        Toast.fail("请选择预约时间");
        return;
      }
      // console.log(arr);
      userSubscribe(arr).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.lists = res.data;
          this.name = this.lists[0].drillname;
          // console.log(this.name);
          this.show = true;
        }
      });
    },

    // 弹出层点击确认做的事情
    confirm() {
      this.show = false;
      let arr = [];
      for (let i = 0; i < this.array.length; i++) {
        if (this.array[i] != undefined) {
          for (let j = 0; j < this.array[i].length; j++) {
            // this.arr
            arr.push(this.array[i][j]);
          }
        }
      }
      // console.log(arr);
      testRecord(arr).then(res => {
        console.log(res);
        if (res.code == 0) {
          // console.log(res);
          Dialog.alert({
            message: "预约成功，如需取消请提前2小时操作"
            // theme: "round-button"
          }).then(() => {
            this.radio = [];
            this.array = [];
            this.CoreeList = [];
            this.CoreeList = res.data;
            this.upload();
          });
        }
        if (res.code == 503) {
          Toast("一天只能预约四次");
        }
        if (res.code == 504) {
          Toast("您已预约相同时间段的课程，请选择其他时段");
        }
        if (res.code == 508) {
          Toast("您的账户余额不足，请充值后重试");
        }
      });
    },

    // 约课记录取消
    abolish(id) {
      callOff(id).then(res => {
        // console.log(res);
        Dialog.confirm({
          message: "确认取消"
        })
          .then(() => {
            // on confirm
            if (res.code == 0) {
              for (let i = 0; i < this.CoreeList.length; i++) {
                if (id == this.CoreeList[i].id) {
                  Toast.success("取消成功");
                  this.CoreeList.splice(i, 1);
                }
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      });
    },

    // 弹出层点击取消的时候做的事情
    cancel() {
      this.show = false;
    }
  },

  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
